<template>
  <div class="app">
    <h1>{{ msg }}，学生姓名是{{ studentName }}</h1>
    <!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
    <School :getSchoolName="getSchoolName" />

    <!-- 通过父组件给子组件绑定自定义事件：子给父传递数据 -->
    <!-- <Student @atguigu="getStudentName" @demo="test" /> -->
    <!-- <Student @atguigu.once="getStudentName" /> -->

    <!-- 通过父组件给子组件绑定自定义事件：子给父传递数据 -->
    <Student ref="student" @click.native="show" />
  </div>
</template>

<script>
import Student from "./components/Student";
import School from "./components/School";

export default {
  name: "App",
  components: { School, Student },
  data() {
    return {
      msg: "你好啊！",
      studentName: "",
    };
  },
  methods: {
    getSchoolName(name) {
      console.log("App收到了学校名：", name);
    },
    getStudentName(name, ...params) {
      console.log("App收到了学生名：", name, params);
      this.studentName = name;
    },
    test() {
      console.log("demo被调用了");
    },
    show() {
      alert(123);
    },
  },
  mounted() {
    this.$refs.student.$on("atguigu", this.getStudentName);
    // this.$refs.student.$on("atguigu", (name) => {
    //   console.log(this);
    //   this.studentName = name;
    // });
    // this.$refs.student.$on("atguigu", function (name) {
    //   // this.studentName = name;
    //   console.log(this);//student组件实例对象
    // });
    //
    // setTimeout(() => {
    //   this.$refs.student.$on("atguigu", this.getStudentName);
    // }, 3000);
    //
    // this.$refs.student.$once("atguigu", this.getStudentName);//仅触发一次
  },
};
</script>

<style scoped>
.app {
  background-color: red;
  padding: 5px;
}
</style>
